iT邦幫忙

2021 iThome 鐵人賽

DAY 1
6
Modern Web

Javascript 從寫對到寫好系列 第 1 篇

Day 1 - 寫「好」程式是什麼樣的感覺?

  • 分享至 

  • xImage
  •  

前言

開賽啦!各位朋友大家好,我想會點進這系列文章的人,可能是以下兩種:

  • 學習前端、Javascript 2~3 年,想看看 Javascript 可以到什麼更高的地方
  • Javascript 老司機,單純想看看怎麼會有人敢談論什麼叫「好」程式

其實,筆者也沒有什麼顯赫的背景,更拿不出什麼嚇嚇叫的作品,只是一個偶然在大四選修計算機中心的網頁課程,並且努力走了四五年的人,現在在一家新創公司擔任全端工程師。

在學習的過程中,其實常常發現,比起周遭的同儕,自己的表現很平凡,往往是下了很多苦功,才做到旁人的舉手之勞,但也正是因為成長很慢,我才特別看重「成長」這件事,而學習 Javascript 的過程中,讓我非常深刻體會到,成長與蛻變的過程。

因為你有發現, Javascript 也在學習與蛻變嗎?

Javascript 的神秘面紗

Javascript 算是公認「易學難精」的語言,因為語言本身寬鬆的特性,要上手並且寫出能夠運作的程式,比起其他語言快很多,再加上網頁就像是一張畫布,我們透過 HTML、CSS、Javascript 調和上色,寫出來的程式都像是一幅幅絢麗的畫,讓人充滿成就感,覺得自己能夠迅速掌握這門語言。

而同時,Javascript 也因為語言寬鬆的特性,往往在型別(type)上表現得模稜兩可,讓我們覺得自己好像很了解它,卻仍不清楚下一秒它會不會炸掉。再加上 Javascript 許多奇怪的特性,往往在我們寫得順風順水時,從背後來一記回馬槍。

「好」的定義是?

回到我們的主題,什麼叫做「好」程式?

  • 好理解(readable)?
  • 好維護(maintainable)?
  • 好重構(refactorable)?
  • 以上皆是?

看到這邊,你不妨也好好想一下,什麼樣的 code 會讓你說很棒?什麼樣的 code 是「好」的?

如果你心裡有個答案,我們先換個角度,來看一下 Javascript 的非同步。

Javascript 非同步是如何邁向「好」的方向

當 XMLHttpRequest 登場時,我們搭配 callback function 做到許多 AJAX 的操作,在那個時代已經是很厲害的機制,跳脫了死板板的同步,局部更新部分畫面,使用者用起來超開心!

接著隨著時代演進,程式規模成長,callback function 漸漸難以負荷多層(nested)的 AJAX 操作,寫起來不知道右括號該放哪,讀起來看不出程式流程,更別提 error handling 加上去立馬變成義大利麵!

Promise

於是它來了!Promise,這個 ES6 嶄新的物件改變了我們這些凡人對非同步的想像,它給出了承諾,Promise 可以被串接(chainable),讓原本多層的 AJAX 被攤平,大幅提升了維護性與可讀性。

但時代的演進是飛速的,程式規模指數型成長,Promise 寫起來仍然就是一個非同步的感覺,穿插在同步程式碼之間,閱讀起來其實也沒那麼輕鬆,對於不熟悉非同步的新手們來說,更是難以判斷程式流向。

async await

於是它來了!async await,這一對摧毀非同步高牆的利器誕生,雖然其實也是基於 Promise 來的,但很好地簡化了許多細節,將非同步的 function 同步化,穿插在同步程式碼中一點也不突兀,程式碼再度提升了可讀性。

看到這裡,你是否感受到非同步程式是如何朝向「好」的方向,隨著時代前進,非同步也持續地在蛻變,你覺得會不會有下一個新技術來取代 async await 呢?

筆者沒有特別研究,不知道是不是真的有,但可以肯定的是,Javascript 一定會繼續進化!

寫「對」v.s. 寫「好」

我心中的「好」程式就是像這樣,是因應時代不斷進化、蛻變的。

我當然可以用 XMLHttpRequest 來寫所有非同步程式,而且寫出來的功能跟 async await 一模一樣,使用者感受不出差異,但那就停留在把程式寫「對」,而不算是寫「好」。

寫「對」程式是客觀成果,我的功能正常、我的 PM 沒貼我 ticket,我的 user 沒打電話給我。

寫「好」程式則是一種主觀精神,我會盡我所能去嘗試,磨練出讓自己愈來愈滿意,甚至團隊成員愈來愈輕鬆的 coding 技能(more readable/maintainable/refactorable)。

因此,寫 code 十年但每天做一樣事的人,不一定能把程式寫「好」,而剛開始學 Javascript 但天天都有所成長的人,才更能夠將程式寫「好」。

關於系列文

這系列的文章「不會」有:

  • 基礎 Javascript 語法或使用
  • 程式刷題教學(但我的隊友 Jen 有,歡迎跳坑)
  • Javascript 框架相關的語法(但我的隊友 pjchender 有,歡迎跳坑)

這系列的文章「會」有:

  • 偏向 Javascript 核心的一些觀念與理解
  • 職場實戰派會用到的實用解法
  • 不一定透過寫 code,菜鳥工程師如何提升自己的「程式感」

結語

沒有最好的程式(best),只有不斷進步的程式(better)


下一篇
Day 2 - Array 陣列組合技 (1)
系列文
Javascript 從寫對到寫好 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

2
TD
iT邦新手 4 級 ‧ 2021-09-17 09:06:40

很特別的主題!期待後面的文章討論~

ycchiuuuu iT邦新手 4 級 ‧ 2021-09-17 09:24:19 檢舉

我也還不知道接下來會寫出什麼,所以我也很期待呢!!
如果有疑問或我的筆誤都歡迎隨時提出囉~

TD iT邦新手 4 級 ‧ 2021-09-17 09:25:45 檢舉

okay!

我要留言

立即登入留言